<template>
  <el-container>
    <el-main>
      <div ref="content" class="containers">
        <div ref="canvas" class="canvas" />
      </div>
    </el-main>
  </el-container>
</template>
<script>
// 引入相关的依赖
import DmnModeler from 'dmn-js/lib/Modeler'
import camundaModdleDescriptor from 'camunda-dmn-moddle/resources/camunda'

export default {
  data () {
    return {
      dmnModeler: null,
      container: null,
      canvas: null
    }
  },
  mounted () {
    // 获取到属性ref为“content”的dom节点
    this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模，官方文档这里讲的很详细
    this.dmnModeler = new DmnModeler({
      container: canvas,
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    })
    this.openDiagram(this.dmnModeler)
  },
  methods: {
    openDiagram (dmnModeler) {
      const dmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
				'<definitions xmlns="http://www.omg.org/spec/DMN/20151101/dmn.xsd" xmlns:biodi="http://bpmn.io/schema/dmn/biodi/1.0" id="init_dmn_id" name="init_dmn_name" namespace="http://camunda.org/schema/1.0/dmn" exporter="Camunda Modeler" exporterVersion="3.4.1">\n' +
				'<decision id="Decision_0bs49yl" name="init">\n' +
				'<extensionElements>\n' +
				'<biodi:bounds x="156" y="81" width="180" height="80" />\n' +
				'</extensionElements>\n' +
				'</decision>\n' +
				'</definitions>\n'
      dmnModeler.importXML(dmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入DMN 2.0流程图', err)
        }
        const activeView = dmnModeler.getActiveView()
        if (activeView.type === 'drd') {
          var activeEditor = dmnModeler.getActiveViewer()
          var canvas = activeEditor.get('canvas')
          canvas.zoom('fit-viewport')
        }
      })
    }
  }
}
</script>
<style>
.el-container {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.containers {
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>
